<template>
    <div class="P-login">
        <div class="btn">
            <button @click="login">登陆</button>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex';
import VueRouter from 'vue-router';

export default {
    methods: {
        ...mapMutations({
            'setUser': 'user/setUser',
            'setRedirectUrl': 'setRedirectUrl'
        }),
        login(){
            //获取到 user 数据
            // 在此处需要做的事：
            // 1、获取用户身份信息，用户中心能访问的菜单做一个返回，动态的添加路由然后跳转
            this.setUser({
                name: 'katy',
                age: 31,
                id: 31257,
                lv: 'LV5',
                head_pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F2a2852817729x2539078638b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650437366&t=1ae0d59bd99c130a6bfa9e4503b1b6f6'
            });
            // 去除跳转路径，replace跳转
            this.$router.replace(this.$store.state.redirectUrl);
            this.setRedirectUrl('');
            // 动态的添加路由，然后跳转
        }
    },
    mounted(){
        console.log(VueRouter.START_LOCATION);
        console.log('从哪里重定向到 login 页面的：');
        console.log(this.$route.redirectedFrom);
    }
};
</script>

<style lang="less">
// less 的引入路径中带上 ~@ 就代表根目录了，aixy会自动解析的，有点坑啊，为什么没有和小程序统一标准？
@import "@/components/common/var.less";

.P-login {
    .btn{
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 40px;
        button{
            .btn();
        }
    }
}
</style>